import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import ImageCaptcha from './ImageCaptcha';
import './CaptchaModal.css';

const CaptchaModal = ({ isOpen, onClose, onVerify, title }) => {
  const { t } = useTranslation();
  const [isCaptchaValid, setIsCaptchaValid] = useState(false);

  const handleCaptchaValidate = (isValid) => {
    setIsCaptchaValid(isValid);
  };

  const handleConfirm = () => {
    if (isCaptchaValid) {
      onVerify();
      onClose();
    }
  };

  const handleClose = () => {
    setIsCaptchaValid(false);
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="captcha-modal-overlay">
      <div className="captcha-modal">
        <div className="captcha-modal-header">
          <h3 className="captcha-modal-title">{title || t('captcha.verification')}</h3>
          <button className="captcha-modal-close" onClick={handleClose}>
            ×
          </button>
        </div>
        <div className="captcha-modal-content">
          <p className="captcha-modal-description">
            {t('captcha.completeVerification')}
          </p>
          <ImageCaptcha onValidate={handleCaptchaValidate} />
        </div>
        <div className="captcha-modal-footer">
          <button 
            className="captcha-modal-btn captcha-modal-cancel" 
            onClick={handleClose}
          >
            {t('common.cancel')}
          </button>
          <button 
            className={`captcha-modal-btn captcha-modal-confirm ${isCaptchaValid ? 'enabled' : 'disabled'}`}
            onClick={handleConfirm}
            disabled={!isCaptchaValid}
          >
            {t('common.confirm')}
          </button>
        </div>
      </div>
    </div>
  );
};

export default CaptchaModal;